<template>
    <div>
        <!-- 下拉菜单 -->
        <van-dropdown-menu>
            <van-dropdown-item
                v-model="value1"
                :options="option1"
                title="综合"
                disabled
            />
            <van-dropdown-item
                v-model="value1"
                :options="option1"
                title="价格"
                @change="priceChange"
            />
            <van-dropdown-item
                v-model="value2"
                :options="filterCategory"
                title="分类"
                @change="categoryChange"
            />
        </van-dropdown-menu>
        <!-- 产品列表 -->
        <!-- 只展示其中一个 -->
        <van-empty
            v-if="searchProductListData == 0"
            description="暂时没有相关商品信息"
        />
        <Products v-else :searchProductListData="searchProductListData" />
    </div>
</template>

<script>
import Products from "../Products";
export default {
    props: ["searchProductListData", "filterCategory"],
    components: { Products },
    methods: {
        categoryChange(value) {
            // console.log("选中了", value);
            this.$emit("categoryChange", value);
        },
        priceChange(value) {
            this.$emit("priceChange", value);
        },
    },
    //因为需要通过filterCategory来渲染页面,式外部传过来的,在created阶段还没有,所以需要在beforupdata阶段才拿得到
    beforeUpdate() {
        this.filterCategory.map((item) => {
            if (item.checked) {
                this.valu2 = item.value;
            }
        });
    },
    data() {
        return {
            value1: "",
            value2: 0,
            option1: [
                { text: "价格由高到低", value: "desc" },
                { text: "价格由低到高", value: "asc" },
            ],
            // option2: [
            //     { text: "全部", value: "a" },
            //     { text: "居家", value: "b" },
            // ],
        };
    },
};
</script>
 
<style lang = "less" scoped>
</style>